<template>
  <view>
    <tn-nav-bar alpha backTitle=""></tn-nav-bar>
    <view :style="{ paddingTop: vuex_custom_bar_height + 'px' }">  </view>
  

    <view class="title">
      <view>让我们更加</view>
      <view>
        了解TA。
      </view>
    </view>
    <view class="userinfo-container">

      <view class="logo-area u-f-ajc">
        <image class="logo-img" src="@/static/image/logo.png" mode="widthFix" />
        <view class="camera-btn">
          <text class="tn-icon-camera-fill"></text>
        </view>
      </view>
      <view class="gender-area">
        <view class="gender-btn u-f-ac" :class="{ active: gender === 'male' }" @click="gender = 'male'">
          <text style="color: #2b9adf;margin-right: 2px;" class="tn-icon-sex-male"></text> 男生
        </view>
        <view class="gender-btn u-f-ac" :class="{ active: gender === 'female' }" @click="gender = 'female'">
          <text style="color:#ff7373 ;margin-right: 2px;" class="tn-icon-sex-female"></text>
          <text>女生</text>
        </view>
      </view>
      <view class="form-area">
        <input class="form-input" placeholder="请输入爱宠名称" v-model="petName" />
        <picker class="form-input" :value="catTypeIndex" :range="catTypes" @change="onCatTypeChange">
          <text class="tn-icon-down-triangle xia"></text>

          <view class="picker-placeholder">{{ catTypeIndex === -1 ? '请选择猫咪品种' : catTypes[catTypeIndex] }}</view>
        </picker>
        <picker class="form-input" mode="date" :value="petBirthday" @change="onPetBirthdayChange">
          <view class="picker-placeholder">{{ petBirthday ? petBirthday : '请选择爱宠生日' }}</view>
          <text class="tn-icon-down-triangle xia"></text>

        </picker>
        <input class="form-input" placeholder="请输入爱宠的体重" v-model="petWeight" />
        <view class="weight-tip">*体重为非必填数据，但可能影响设备测算数据的准确性。</view>
        <picker class="form-input" mode="date" :value="userBirthday" @change="onUserBirthdayChange">
          <view class="picker-placeholder">{{ userBirthday ? userBirthday : '请选择您的生日' }}</view>
          <text class="tn-icon-down-triangle xia"></text>
        </picker>
      </view>
      <button class="submit-btn u-f-ajc" @click="goRes">提交</button>
      <view class="indicator">
        <view class="dot"></view>
        <view class="dot"></view>

        <view class="dot1"></view>
      </view>
    </view>
  </view>

</template>

<script>
export default {
  data() {
    return {
      type: '',
      gender: 'male',
      petName: '',
      catTypes: ['英短', '美短', '布偶', '暹罗', '其它'],
      catTypeIndex: -1,
      petBirthday: '',
      petWeight: '',
      userBirthday: ''
    }
  },
  onLoad(options) {
    this.type = options.type
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    goRes() {
      uni.navigateTo({
        url: '/pages/register/res?type=' + this.type
      })
    },
    onCatTypeChange(e) {
      this.catTypeIndex = e.detail.value
    },
    onPetBirthdayChange(e) {
      this.petBirthday = e.detail.value
    },
    onUserBirthdayChange(e) {
      this.userBirthday = e.detail.value
    }
  }
}
</script>

<style scoped lang="scss">
.indicator {
  position: fixed;
  bottom: 100rpx;
  right: 350rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;

  .dot1 {
    width: 23rpx;
    height: 13rpx;
    border-radius: 30%;
    background: #079a3e;
    margin: 0 5rpx;
    transition: background 0.2s;
  }

  .dot {
    width: 13rpx;
    height: 13rpx;
    border-radius: 50%;
    background: #e0e0e0;
    margin: 0 5rpx;
    transition: background 0.2s;
  }
}

.back-btn {
  position: absolute;
  top: 52rpx;
  left: 24rpx;
  z-index: 10;
  font-size: 40rpx;
  color: #222;
  padding: 10rpx;
}

.title {
  font-size: 46rpx;
  font-weight: bold;
  margin-left: 32rpx;
  margin-bottom: 0rpx;
  margin-top: 32rpx;
  color: #111;
}

.xia {
  font-size: 20px;
  position: absolute;
  right: 30rpx;
  top: 20rpx;
  color: #999;
}

.userinfo-container {
  min-height: 70vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 0 0 40rpx 0;
  align-items: center;
}

.logo-area {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32rpx;
  margin-bottom: 32rpx;
  position: relative;
}

.logo-img {
  width: 100rpx;
  height: 100rpx;
}

.camera-btn {
  position: absolute;
  bottom: -18rpx;
  left: 80%;
  transform: translateX(-50%);
  background: #000;
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32rpx;
  border: 4rpx solid #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}

.gender-area {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 32rpx 0 36rpx 0;
  gap: 24rpx;
}

.gender-btn {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  background: #fafafa;
  color: #222;
  border-radius: 32rpx;
  padding: 0 38rpx;
  height: 64rpx;
  margin: 0 8rpx;
  transition: background 0.2s, color 0.2s;
}

.gender-btn .iconfont {
  font-size: 32rpx;
  margin-right: 8rpx;
}

.gender-btn.active {
  background: #000;
  color: #fff;
}

.gender-btn.active .iconfont {
  color: #4db6ff;
}

.gender-btn:not(.active) .iconfont.icon-female {
  color: #ff7cae;
}

.gender-btn:not(.active) .iconfont.icon-male {
  color: #4db6ff;
}

.form-area {
  width: 98vw;
  max-width: 600rpx;
  display: flex;
  flex-direction: column;
  gap: 28rpx;
  margin-bottom: 32rpx;
}

.form-input {
  position: relative;
  width: 100%;
  height: 80rpx;
  background: #fff;
  border-radius: 40rpx;
  border: 2rpx solid #e5e5e5;
  font-size: 28rpx;
  color: #222;
  padding: 0 36rpx;
  box-sizing: border-box;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

.picker-placeholder {
  color: #bbb;
  font-size: 28rpx;
}

.weight-tip {
  color: #bbb;
  font-size: 22rpx;
  margin: 0 0 0 16rpx;
}

.submit-btn {
  width: 92vw;
  max-width: 600rpx;
  height: 98rpx;
  background: #000;
  color: #fff;
  border-radius: 55rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
  margin-top: 32rpx;
  letter-spacing: 2rpx;
}

.iconfont.icon-camera {
  font-size: 32rpx;
}
</style>
